<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>权限管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/lib/layui-v2.5.5/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/layui_ext/dtree/dtree.css}" >
    <link rel="stylesheet" th:href="@{/lib/layui_ext/dtree/font/dtreefont.css}" >
    <link rel="stylesheet" th:href="@{/js/lay-module/step-lay/step.css}" >
</head>
<body>

<span th:replace="common_page::common"></span>
<div class="layuimini-container">
    <div class="layuimini-main">

        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-card-body" style="padding-top: 40px;">
                    <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
                        <div carousel-item>
                            <div>
                                <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                    <input type="hidden" id="adminId" th:value="${adminId}">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">关联应用</label>
                                        <div class="layui-input-block">
                                            <select id="selectApp" name="appCode" lay-verify="required"  lay-search="">
                                                <option value="">请选择</option>
                                                <option th:each="aa : ${apps}" th:value="${aa.appCode}" th:text="${aa.appCode}+' '+${aa.name}">
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button class="layui-btn" lay-submit lay-filter="formStep">
                                                &emsp;下一步&emsp;
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div>
                                <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                    <div class="layui-form-item">
                                        <ul id='orgTree' class='dtree' data-id='0'></ul>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                                            <button class="layui-btn" lay-submit lay-filter="formStep2">
                                                &emsp;保存&emsp;
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div>
                                <div style="text-align: center;margin-top: 90px;">
                                    <i class="layui-icon layui-circle"
                                       style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
                                    <div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
                                        操作完成
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div style="color: #666;margin-top: 30px;margin-bottom: 40px;padding-left: 30px;">
                        <h3>说明</h3><br>
                        <h4>选择账号所属的应用</h4>
                        <p>选择应用关联的组织机构</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<script th:src="@{/lib/layui-v2.5.5/layui.js}" charset="utf-8"></script>
<script th:src="@{/js/lay-module/step-lay/step.js}" charset="utf-8"></script>
<script th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script>
    layui.config({
        base: basePath+'/lib/layui_ext/dtree/' //配置 layui 第三方扩展组件存放的基础目录
    }).extend({
        dtree: 'dtree' //定义该组件模块名
    }).use([ 'form','dtree'], function () {
        var $ = layui.$,
            form = layui.form,
            step = layui.step;
        var dtree = layui.dtree;
        var orgnazitionTree;
        var orgnazitionTreeDataArray = new Array();
        var g_appCode;

        step.render({
            elem: '#stepForm',
            filter: 'stepForm',
            width: '100%', //设置容器宽度
            stepWidth: '750px',
            height: '500px',
            stepItems: [{
                title: '选择关联应用'
            }, {
                title: '选择组织机构'
            }, {
                title: '完成'
            }]
        });



        /**
         * 拿到所有选中节点的ID
         * @param data
         * @param idArray
         */
        function getCheckdNodeId(data,idArray)
        {
            for(var i=0;i<data.length;i++)
            {
                orgnazitionTreeDataArray.push(data[i]);
                if(data[i].state.checked==true)
                {
                    idArray.push(data[i].id);
                }
                if(data[i].children!=null&&data[i].children.length>0)
                {
                    getCheckdNodeId(data[i].children,idArray);
                }
            }
        }


        /**
         * 拿到指定节点对象
         */
        function getNodeObject(nodeId)
        {
            for(var i=0;i<orgnazitionTreeDataArray.length;i++)
            {
                if(orgnazitionTreeDataArray[i].id==nodeId)
                {
                    return orgnazitionTreeDataArray[i];
                }
            }
            return null;
        }


        /**
         * 拿到上级节点信息
         */
        function getParentNode(orgnazitionsArray,pid)
        {
            for(var i=0;i<orgnazitionTreeDataArray.length;i++)
            {

                if(orgnazitionTreeDataArray[i].id==pid)
                {
                    var exists=false;
                    //判断上级节点ID是否已经保存了
                    for(var j=0;j<orgnazitionsArray.length;j++)
                    {
                        if(orgnazitionsArray[j].id==pid) {
                            exists = true;
                        }
                    }
                    //避免上级节点ID重复保存两份
                    if(!exists)
                    {
                        orgnazitionsArray.push({orgnazitionId:orgnazitionTreeDataArray[i].orgnazitionId,appCode:g_appCode})
                    }
                    if(orgnazitionTreeDataArray[i].pid!=-1) {
                        //找到这个节点的上级节点
                        getParentNode(orgnazitionsArray, orgnazitionTreeDataArray[i].pid);
                    }
                }
            }
        }


        form.on('submit(formStep)', function (data) {
            step.next('#stepForm');
            g_appCode=data.field.appCode;
            loadding = layer.load();
            $.ajax({
                url:"[[@{/}]]orgnazition/query/admin/orgnazition/tree",
                contentType: "application/json; charset=utf-8",
                type:'POST',
                data:JSON.stringify({adminId:$("#adminId").val(),appCode:data.field.appCode}),
                success:function(data){
                    if(data.code==1)
                    {
                        //已选择节点
                        orgnazitionTreeDataArray = new Array();
                        var idArray = new Array();
                        getCheckdNodeId(data.data,idArray);
                        orgnazitionTree = dtree.render({
                            elem: "#orgTree",//html中的id值
                            data:data.data,
                            checkbarType: "no-all",
                            width:'100%',
                            checkbar: true,  //开启复选框
                            checkbarData: "choose",// 记录选中（默认）， "change"：记录变更， "all"：记录全部， "halfChoose"："记录选中和半选（V2.5.0新增）"
                            done: function (res, $ul, first) {
                                if (first) {
                                    if(idArray!=null&&idArray.length>0) {
                                        dtree.chooseDataInit("orgTree", idArray.join(",")); //"001001,001002"被选中的子节点id
                                        dtree.initNoAllCheck("orgTree");// 反选半选状态(原始数据中父节点的选中或半选状态并没有被带上)
                                    }
                                }

                            }
                        });
                    }
                },
                complete:function()
                {
                    layer.close(loadding);
                }
            });
            return false;
        });

        form.on('submit(formStep2)', function (data) {

            var selectNodes = orgnazitionTree.getCheckbarNodesParam("orgTree");
            if(selectNodes==null||selectNodes.length<=0)
            {
                layer.msg("请选择组织机构");
                return false;
            }
            loadding = layer.load();
            var orgArray =  new Array();
            for (var i = 0; i < selectNodes.length; i++) {
                var selectNodeObject = getNodeObject(selectNodes[i].nodeId);
                orgArray.push({orgnazitionId:selectNodeObject.orgnazitionId,appCode:g_appCode});
                getParentNode(orgArray,selectNodeObject.pid);
            }
            $.ajax({
                url: "[[@{/}]]admin/connect/orgnazitions",
                contentType: "application/json; charset=utf-8",
                type: 'POST',
                data: JSON.stringify({adminOrgnazitions:orgArray,adminId:$("#adminId").val()}),
                success: function (data) {
                    layer.close(loadding);
                    if (data.code == 0) {
                        layer.msg(data.msg);
                        return false;
                    }
                    step.next('#stepForm');
                }
            });
            return false;
        });

        $('.pre').click(function () {
            step.pre('#stepForm');
        });

        $('.next').click(function () {
            step.next('#stepForm');
        });
    })
</script>

</body>
</html>